piratezon_new/app/pages/site-manager/field/edit/[id].vue

<template>
  <div class="admin--page-content">
    <form @submit.prevent="handleSubmit" class="admin--form">
      <!-- 낚시분야 -->
      <table class="admin--form--table">
        <colgroup>
          <col style="width: 120px;">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <th>
              <div>
                분야 <span class="admin--required">*</span>
              </div>
            </th>
            <td>
              <div class="input--wrap">
                <input
                  v-model="formData.name"
                  type="text"
                  class="admin--form-input"
                  placeholder="예: 갯바위낚시"
                  required
                />
                <p>낚시 종류 분류명. 1~30자 이내. 중복 불가</p>
              </div>
            </td>
          </tr>
          <tr>
            <th>
              <div>
                가중치 <span class="admin--required">*</span>
              </div>
            </th>
            <td>
              <div class="input--wrap">
                <input
                  v-model="formData.weight"
                  type="text"
                  class="admin--form-input w--120"
                  placeholder="0.0 ~ 1.0"
                  required
                />
                <p>0.0 ~ 1.0 사이 소수점 1자리 (최대값 1.0 = 100% 확률). 물고기 잡을 때 아이템 지급 확률</p>
              </div>
            </td>
          </tr>
          <tr>
            <th><div>상태  <span class="admin--required">*</span></div></th>
            <td>
              <div class="input--wrap">
                <label class="admin--radio-label">
                  <input type="radio" v-model="formData.status_YN" value="Y" /> 사용중
                </label>
                <label class="admin--radio-label ml--16">
                  <input type="radio" v-model="formData.status_YN" value="N" /> 미사용
                </label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="admin--info--box">
        <h3>💡 가중치 안내</h3>
        <ul>
          <li>가중치 = 해당 분야에서 물고기 잡았을 때 아이템이 지급될 확률 (최대값 1.0 = 100%)</li>
          <li>예: 0.8 = 80% 확률로 아이템 드롭. 분야별 난이도/희소성에 맞춰 신중히 설정</li>
        </ul>
      </div>

      <!-- 버튼 영역 -->
      <div class="admin--form-actions">
        <button type="button" class="admin--btn" @click="goToDetail">
          ← 취소
        </button>
        <button type="submit" class="admin--btn admin--btn-red ml--auto" :disabled="isSaving">
          {{ isSaving ? "저장 중..." : "저장" }}
        </button>
      </div>

      <!-- 성공/에러 메시지 -->
      <div v-if="successMessage" class="admin--alert admin--alert-success">
        {{ successMessage }}
      </div>
      <div v-if="errorMessage" class="admin--alert admin--alert-error">
        {{ errorMessage }}
      </div>
    </form>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";

  definePageMeta({
    layout: "admin",
    middleware: ["auth"],
  });

  const route = useRoute();
  const router = useRouter();
  const { get, put } = useApi();

  const fieldId = route.params.id;

  const isSaving = ref(false);
  const successMessage = ref("");
  const errorMessage = ref("");

  const formData = ref({
    name: "",
    weight: "",
    status_YN: "Y",
  });

  // 가중치 형식: 0.0 ~ 1.0, 소수점 1자리
  const WEIGHT_PATTERN = /^(0(\.\d)?|1(\.0)?)$/;

  // 기존 데이터 로드
  const loadDetail = async () => {
    const { data, error } = await get(`/field/${fieldId}`);

    if (error || !data?.success) {
      errorMessage.value = error?.message || data?.message || "조회에 실패했습니다.";
      return;
    }

    const row = data.data || {};
    formData.value = {
      name: row.name ?? "",
      weight: row.weight ?? "",
      status_YN: row.status_YN ?? "Y",
    };
  };

  // 폼 제출
  const handleSubmit = async () => {
    successMessage.value = "";
    errorMessage.value = "";

    const name = formData.value.name.trim();
    const weight = formData.value.weight.trim();
    const status_YN = formData.value.status_YN;

    if (!name) return (errorMessage.value = "분야명을 입력하세요.");
    if (name.length > 30) return (errorMessage.value = "분야명은 30자 이내로 입력하세요.");
    if (!weight) return (errorMessage.value = "가중치를 입력하세요.");
    if (!WEIGHT_PATTERN.test(weight))
      return (errorMessage.value = "가중치는 0.0 ~ 1.0 사이 소수점 1자리로 입력하세요.");

    isSaving.value = true;
    try {
      const { data, error } = await put(`/field/${fieldId}`, { name, weight, status_YN });

      if (error || !data?.success) {
        errorMessage.value = error?.message || data?.message || "수정에 실패했습니다.";
      } else {
        successMessage.value = data.message || "수정되었습니다.";
        setTimeout(() => {
          router.push(`/site-manager/field/detail/${fieldId}`);
        }, 800);
      }
    } catch (e) {
      errorMessage.value = "서버 오류가 발생했습니다.";
      console.error("Update error:", e);
    } finally {
      isSaving.value = false;
    }
  };

  // 이동
    const goToDetail = () => router.push(`/site-manager/field/detail/${fieldId}`);

  onMounted(() => {
    loadDetail();
  });
</script>